import React,{Component} from 'react';
class ShoppingList extends Component{
    constructor(props){
        super(props);
       Object.assign(this.state,{
           foods:[
               {name:'apple',price:12.3,number:0},
               {name:'orange',price:10.2,number:0},
               {name:'banana',price:15.0,number:0}
           ]
       });
       this.clickDeal = this.clickDeal.bind(this);
    }
    state = {
        name:'shoppingList',
        author:'杨通通',
        isToggleOn:"ON"
    }

    componentDidUpdate() {
        // console.log('componentDidUpdate');
    }
    clickDeal(item){
        // console.log(item);
        // console.log(e);

        item.number = item.number+1;
        
            this.setState((preState)=>{
                // console.log(preState);
                return {
                    // author:'Mr Yang',

                };
            });
        // console.log('click item');
    }
    changeStatus=()=>{

        this.setState((preState)=>{
            return {
                isToggleOn:((this.state.isToggleOn === 'ON')?'OFF':'ON')
            }
        })
    }
    render(){

        let list = this.state.foods.map((item)=>{
           // return <li key={item.name} onClick={(e)=>this.clickDeal(e,item)}>{item.name}:{item.price}====已经售卖:{item.number}</li>
           // return <li key={item.name} onClick={this.clickDeal.bind(this,item)}>{item.name}:{item.price}====已经售卖:{item.number}</li>
            return <li key={item.name} onClick={(e)=>this.clickDeal(item)}>{item.name}:{item.price}====已经售卖:{item.number}</li>
        });
        let li2 = <li>我是插入的,作者{this.state.author}</li>;
        return(
            <div>
                <button onClick={this.changeStatus}>{this.state.isToggleOn}</button>
                <p>我是{this.state.name}</p>
                <p>{this.props.name}</p>
                <ul>
                    {list}
                    {li2}
                </ul>
            </div>
        );
    }
}
export  default ShoppingList;